<!doctype html>
<html lang="en">
<head>
    <title>Tree - Drag & Drop</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Drag&Drop" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.1.0.min.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijtree.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../Wijmo/jquery.wijmo.wijtree.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var span = "<span class=\"ui-widget-content helperInner\">";
            $("#tree1").wijtree({
                allowDrop: false,
                allowDrag: true,
                dropVisual: function () {
                    return $("<div>").addClass("dropVisual");
                },
                appendTo: 'body',
                draggable: {
                    revert: "invalid",
                    start: function (event, ui) {
                        ui.helper.html(ui.helper.html() + span);
                    },
                    drag: function (event, ui) {
                        var inner = ui.helper.children(".helperInner");
                        if (inner.length) {
                            inner.html("x:" + event.pageX + " y:" + event.pageX);
                        }
                    },
                    stop: function (event, ui) {
                        $(this).hide()
                        $(this).show("highlight", 500);
                    }
                }
            });

            var getInitMarkup = function (dragNode) {
                var node = dragNode.clone();
                node.find("a").unwrap().unwrap();
                node.find("li>span,>span").remove();
                return node;
            };

            $("#tree2").wijtree({
                allowDrop: true,
                allowDrag: false,
                droppable: {
                    drop: function (event, ui) {
                        var dragNode = ui.draggable,
                        p = ui.newParent,
                        po = ui.newIndex, node;

                        node = getInitMarkup(dragNode);

                        if (p.is(":wijmo-wijtree")) {
                            p.wijtree("add", node, po);
                        }
                        else {
                            p.wijtreenode("add", node, po);
                        }
                    }
                }
            });

            $("#trash").droppable({
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                scope: "tree",
                drop: function (event, ui) {
                    var node = ui.draggable;
                    delTreeNode(node, this);
                }
            });

            var delTreeNode = function (node, trash) {
                var parent = node.parent()
                .closest(":wijmo-wijtreenode,:wijmo-wijtree");
                if (parent.is(":wijmo-wijtreenode")) {
                    parent.wijtreenode("remove", node);
                }
                else {
                    parent.wijtree("remove", node);
                }
                node.appendTo($(trash).children("ul:eq(0)"));
            }
        });       
    </script>
    <style>
        #trash
        {
            float: right;
            min-height: 12em;
            padding: 1%;
            width: 32%;
        }
        #trash ul
        {
            list-style: none;
        }
        
        #trash ul li
        {
            margin-bottom: 10px;
        }
              
        div.wijmo-wijtree
        {
            float: left;
        }
        
            
        .dropVisual
        {
	        height:1px;
	        font-size:0px;/*fix ie 6 issue*/
	        background-color:Red;
        }    
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Drag & Drop</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            
            <div>
                <ul id="tree1">
                    <li><a><span>Folder 1</span></a>
                        <ul>
                            <li><a><span>Folder 1.1</span></a></li>
                            <li><a><span>Folder 1.2</span></a></li>
                            <li><a><span>Folder 1.3</span></a></li>
                            <li><a><span>Folder 1.4</span></a></li>
                            <li><a><span>Folder 1.5</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span>Folder 2</span></a>
                        <ul>
                            <li><a><span>Folder 2.1</span></a></li>
                            <li><a><span>Folder 2.2</span></a></li>
                            <li><a><span>Folder 2.3</span></a></li>
                            <li><a><span>Folder 2.4</span></a></li>
                            <li><a><span>Folder 2.5</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span>Folder 3</span></a>
                        <ul>
                            <li><a><span>Folder 3.1</span></a></li>
                            <li><a><span>Folder 3.2</span></a></li>
                            <li><a><span>Folder 3.3</span></a></li>
                        </ul>
                    </li>
                </ul>
            </div>

          
            <div id="trash" class="ui-widget-content">
                <h4 class="ui-widget-header">
                    <span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
                <ul>
                </ul>
            </div>
            <div style="clear:both"></div>
             <p>
                Clone node to this tree:</p>
             <div>
                <ul id="tree2">
                    <li><a><span>Folder 4</span></a>
                        <ul>
                            <li><a><span>Folder 4.1</span></a></li>
                            <li><a><span>Folder 4.2</span></a></li>
                            <li><a><span>Folder 4.3</span></a></li>
                            <li><a><span>Folder 4.4</span></a></li>
                            <li><a><span>Folder 4.5</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span>Folder 5</span></a>
                        <ul>
                            <li><a><span>Folder 5.1</span></a></li>
                            <li><a><span>Folder 5.2</span></a></li>
                            <li><a><span>Folder 5.3</span></a></li>
                            <li><a><span>Folder 5.4</span></a></li>
                            <li><a><span>Folder 5.5</span></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- End demo markup -->
        </div>
    </div>
</body>
</html>
